<template>
  <div class="article-loading-area">
    <el-skeleton class="el-skeleton" :loading="articleStore.loading" animated>
      <template #template>
        <header style="margin-top: 2rem">
          <el-skeleton-item style="width: 30%;" variant="text"  />
          <el-skeleton-item variant="text" style="margin-right: 16px"/>
        </header>
        <div class="content">
          <el-skeleton-item  variant="image" style="width: 240px; height: 125px"/>
          <div class="text">
            <el-skeleton-item class="item" variant="text"  />
            <el-skeleton-item class="item" variant="text"  />
            <el-skeleton-item class="item" variant="text"  />
            <el-skeleton-item style="width: 30%;" variant="text"  />
          </div>
        </div>
        <footer>
          <el-skeleton-item style="width: 30%;" variant="text"  />
          <el-skeleton-item style="width: 20%; margin-left: 1rem" variant="text"  />
        </footer>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup>
import {useArticleStore} from "@/store/articleStore.js";
const articleStore = useArticleStore();
</script>

<style lang="scss" scoped>
.article-loading-area{
  width: 100%;
}
.el-skeleton{
  margin-top: 2rem;
}
.content {
  margin-top: 1rem;
  display: flex;
  .text{
    width: 100%;
    .item{
      width: 100%;
    }
  }
}
</style>